<template>
  <div>
    <el-card style="margin-top:20px;">
      <h3>商品管理</h3>
      <el-button type="primary" @click="addProduct">添加品类</el-button>
      <el-row style="margin-top:10px;">
        <el-select v-model="searchWay" placeholder="请选择查找方法">
          <el-option label="按商品ID查询" value="productId"></el-option>
          <el-option label="按商品名称查询" value="productName"></el-option>
        </el-select>
        <el-input style="width:140px;" v-model="queryInfo.query" placeholder="请输入内容"></el-input>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-row>

      <el-table :data="list" stripe style="width: 100%">
        <el-table-column prop="id" label="id" width="180"></el-table-column>
        <el-table-column label="信息" width="180">
          <template slot-scope="scope">
            <p>{{scope.row.name}}</p>
            <p>{{scope.row.subtitle}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="180"></el-table-column>
        <el-table-column label="状态" width="180">
            <template slot-scope="scope">
            <p v-if='scope.row.status == "1"'>在售</p>
            <p v-else>已下架</p>
            <el-button @click="changeStatus(scope.row)" v-if='scope.row.status == "1"' size="mini" type="warning">下架</el-button>
            <el-button @click="changeStatus(scope.row)" v-else size="mini" type="warning">上架</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
              <el-button @click="check(scope.row)" type="success" size='mini'>查看</el-button>
              <el-button @click="edit(scope.row)" type="danger" size='mini'>编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" @changeNum="changeNum" @changeSize="changeSize"></pagination>
    </el-card>
  </div>
</template>

<script>
import { productList } from "../util/http";
import { productStatus } from "../util/http";
import { productSearch } from "../util/http";
import pagination from "../components/pagination";
export default {
  // 组件名称
  name: "demo", // 组件参数 接收来自父组件的数据
  props: [],
  components: { pagination },
  data() {
    return {
      queryInfo: {
        pageNum: 1,
        pageSize: 10,
        query:''
      },
      searchWay: "",
      total: 0,
      list: []
    };
  },
  computed: {},
  watch: {},
  methods: {
    async getProduct() {
      const { data: res } = await productList(
        `/api/manage/product/list.do?pageNum=${this.queryInfo.pageNum}&pageSize=${this.queryInfo.pageSize}`
      );
      this.list = res.data.list;
      this.total = res.data.total;
    },
    async search() {
      if( this.searchWay !== '' ){
        const {data:res} = await productSearch(`/api/manage/product/search.do?listType=search&pageNum=${this.queryInfo.pageNum}&${this.searchWay}=${this.queryInfo.query}`)
        if (res.status !== 0) return this.$message.error("商品不存在");
        this.list = res.data.list;
        this.total = res.data.total;
        this.$message.success("获取数据成功");
      }else{
        return this.$message.error('请选择查找方式')
      }
    },
    changeNum(val) {
      this.queryInfo.pageNum = val;
      this.getProduct();
    },
    changeSize(val) {
      this.queryInfo.pageSize = val;
      this.getProduct();
    },
    check(info){
      // console.log(info.categoryId)
      this.$router.push('/productCheck')
      this.$store.commit('saveProduct',info)
    },
    edit(info){
      this.$router.push('/productEdit')
      this.$store.commit('saveProduct',info)
    },
    async changeStatus(info){
        const confirmResult = await this.$confirm('是否修改商品状态, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        if( confirmResult == 'cancel' ) return this.$message.info('取消修改商品状态')
        var status 
        if( info.status == '1' ){
            status = '2'
        }else{
            status = '1'
        }
        const {data:res} = await productStatus(`/api/manage/product/set_sale_status.do?productId=${info.id}&status=${status}`)
        if( res.status !== 0 ) return this.$message.danger('修改商品状态失败')
        this.$message.success('修改商品状态成功')
        this.getProduct()
    },
    addProduct(){
      this.$router.push('/addProduct')
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.getProduct();
  }
};
</script> 
<style scoped>
</style>
